<template>
  <div class="container-layer-tabbar">
    <div class="item-tabbar">
      <van-tabbar active-color="#07c160" inactive-color="#000">
        <van-tabbar-item v-for="(temp, index) in list_router" :key="index" info @click="routerLink(temp)" class="tabbg">
          <img slot="icon" :src="nowPage == index ? list_icon[temp].active : list_icon[temp].normal" class="icon">
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    nowPage: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      list_router: ["home", "interact", "subject", "cooperation", "about"],
      list_icon: {
        home: {
          normal: "./static/sy.png",
          active: "./static/sy-active.png"
        },
        interact: {
          normal: "./static/anli.png",
          active: "./static/anli-active.png"
        },
        subject: {
          normal: "./static/zhuanti.png",
          active: "./static/zhuanti-active.png"
        },
        cooperation: {
          normal: "./static/hezuo.png",
          active: "./static/hezuo-active.png"
        },
        about: {
          normal: "./static/guanyu.png",
          active: "./static/guanyu-active.png"
        }
      }
    };
  },
  methods: {
    routerLink(name) {
      if (name === this.list_router[this.nowPage]) {
        return console.log("就是当前页了");
      }
      this.$router.push({ name });
    }
  }
};
</script>

<style lang="less">
.container-layer-tabbar {
  height: 50px;
  .item-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
  }
  .van-tabbar-item__icon {
    margin-top: 20px;
    margin-bottom: auto !important;
  }
  .van-tabbar-item__icon img {
    display: block;
    // width: 20px;
    // // height: 40px;
  }
  .icon {
    width: 24px !important;
    height: 40px;
    transform: translate(0px, -10px);
    //  width: 6% !important;
    //  padding: 0 7%;
    //  padding-top: 15px !important;
    //  padding-bottom: 20px;
  }
  .tabbg {
  }
}
</style>
